<template>
	<view>
		<view class="dflex">
			<view class="itt">
				<picker mode="date" :value="begindate" :start="startDate" fields="month" @change="bindDateChange">
					<view :style="{color:begindate?'#000000':'#D1D1D6'}" class="uni-input">{{begindate?begindate:'选择开始日期'}}</view>
				</picker>
			</view>
			<view class="ts">
				至
			</view>
			<view class="itt">
				<picker mode="date" :value="enddate" :start="begindate" fields="month" @change="bindDateChange1">
					<view :style="{color:enddate?'#000000':'#D1D1D6'}" class="uni-input">{{enddate?enddate:'选择结束日期'}}</view>
				</picker>
			</view>
			<view class="" v-if="showIcon" @click="clear">
				<uni-icons type="clear" size="20" color="#999"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "dateselect",

		computed: {
			startDate() {
				return this.getDate('start');
			},
			showIcon(){
				if(this.begindate!='' && this.enddate!=''){
					this.$emit('change',[this.begindate,this.enddate])
				}
				return this.begindate!='' && this.enddate!=''	
			}
			
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				begindate:'',
				enddate:''
			};
		},
		methods: {
			clear(){
				this.begindate = ''
				this.enddate = ''
				this.$emit('change',[this.begindate,this.enddate])
			},
			bindDateChange: function(e) {
				this.begindate = e.detail.value
			},
			bindDateChange1: function(e) {
				this.enddate = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}`;
			}
		}
	}
</script>

<style lang="scss">
.dflex{
	min-width: 500rpx;
	display: flex;
	align-items: center;
	border: 1px solid #D9D9D9;
	border-radius: 8rpx;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	justify-content: space-between;
	.ts{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
	}
	.itt{
		flex: 1;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0rpx 20rpx;
		text-align: center;
	}
}
</style>